import 'package:flutter/material.dart';

//引入自定义动态列表数据
import 'package:talk/res/listData.dart';

import '../../tools/widgets/my_app_bar.dart';


//Card
//图文循环列表
class TrendsPage extends StatelessWidget {
  const TrendsPage({super.key});

  //定义方法循环遍历ListData中的数据，使用Map循环
  List<Widget> _initCardData(){

    var tempList = listData.map((value){
      return Card(
        //Shape： Card的阴影效果，默认的阴影效果为圆角的长方形边。
        shape: RoundedRectangleBorder(
          //圆角效果
          borderRadius: BorderRadius.circular(10),
        ),
        //elevation：阴影值的深度
        elevation: 10,
        //颜色
        // color: Colors.black12,
        //四周间距
        margin: const EdgeInsets.all(10),
        child: Column(
          children: [
            //AspectRatio：宽高比组件
            AspectRatio(
              aspectRatio: 16/9,
              child: Image.network(
                value["imageUrl"],
                //占满屏幕
                fit: BoxFit.cover,
              ),
            ),
            ListTile(
              //CircleAvatar：圆形头像图片
              leading: CircleAvatar(
                backgroundImage: NetworkImage(value["imageUrl"],),
              ),
              title: Text(value["title"]),
              subtitle: Text(value["author"]),
            )
          ],
        ),
      );
    });

    return tempList.toList();
  }

  //定义方法循环遍历ListData中的数据，使用Builder循环
  // ListView _initCardData(){
  //
  //   var tempList = ListView.builder(
  //     //builder需要传两个参数itemCount  itemBuilder
  //     //数量就是长度
  //     itemCount: listData.length,
  //     //形参context：上下文context对象   index：索引值，相当于for循环中的i
  //     itemBuilder: (context, i){
  //       return Card(
  //         //Shape： Card的阴影效果，默认的阴影效果为圆角的长方形边。
  //         shape: RoundedRectangleBorder(
  //           //圆角效果
  //           borderRadius: BorderRadius.circular(10),
  //         ),
  //         //elevation：阴影值的深度
  //         elevation: 10,
  //         //颜色
  //         // color: Colors.black12,
  //         //四周间距
  //         margin: const EdgeInsets.all(10),
  //         child: Column(
  //           children: [
  //             //AspectRatio：宽高比组件
  //             AspectRatio(
  //               aspectRatio: 16/9,
  //               child: Image.network(
  //                 listData[i]["imageUrl"],
  //                 //占满屏幕
  //                 fit: BoxFit.cover,
  //               ),
  //             ),
  //             ListTile(
  //               //CircleAvatar：圆形头像图片
  //               leading: CircleAvatar(
  //                 backgroundImage: NetworkImage(listData[i]["imageUrl"]),
  //               ),
  //               title: Text(listData[i]["title"]),
  //               subtitle: Text(listData[i]["author"]),
  //             )
  //           ],
  //         ),
  //       );
  //     },
  //   );
  //   return tempList;
  // }

  @override
  Widget build(BuildContext context) {
    //Bulider
    // return _initCardData();
    //Map
    return  Scaffold(
      backgroundColor: Colors.transparent,
      // appBar: const MyAppBar(
      //   centerTitle: '333',
      //   backgroundColor: Colors.transparent,
      //   backImgColor: Colors.transparent,
      // ),
      body:ListView(
        children: _initCardData(),
      ),
    );

  }
}

